<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 系统字典
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <!-- <el-switch v-model="query.activeStatus" class="handle-switch mr40" @change="func_switch_load"
                    placeholder="启用状态" active-value="1" inactive-value="0" active-text="有效数据" inactive-text="全部数据" >
                </el-switch> -->
                <el-input v-model="query.keyword" placeholder="查询字典名称，或索引，或类目编码" class="handle-input mr10" />
                <el-button type="primary" icon="el-icon-search" @click="func_handleSearch">搜索</el-button>
                <el-dropdown style="margin-left:15px">
                    <el-button type="warning">
                    操作<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <template #dropdown>
                    <el-dropdown-menu >
                        <el-dropdown-item icon="el-icon-edit" @click="func_handleAddBut">新建</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-delete" @click="func_handleDelBut">删除</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-refresh-right" @click="func_handleRecyclingBut">恢复</el-dropdown-item>
                    </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <el-table v-loading="isLoading" row-key="id" lazy :load="func_table_lazy_load" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            :data="dictTableData" stripe  border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column prop="id" label="ID" width="90" align="center"></el-table-column>
                <el-table-column prop="dicCode" label="索引编号" />
                <el-table-column prop="dicName" label="中文释义" />
                <el-table-column prop="dicNickname" label="英文释义" />
                <el-table-column prop="dicValue" label="索引值" />
                <el-table-column prop="groupCode" label="类目名称" />
                <el-table-column prop="groupId" label="类目编号" />
                <el-table-column prop="sort" label="排序" v-if="view_level_show" />
                <el-table-column label="状态" align="center" >
                    <template #default="scope">
                        <el-tag :type="
                                scope.row.disable === '成功' ? 'success' :
                                scope.row.disable === '失败' ? 'danger' : '' ">{{ scope.row.disable }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template #default="scope">
                        <el-button type="text" icon="el-icon-edit" @click="func_handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button type="text" icon="el-icon-delete" class="red"
                            @click="func_handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination @size-change="func_handleSizeChange" @current-change="func_handlePageChange"
                background layout="total, sizes, prev, pager, next," 
                        :current-page="query.pageNum"
                        :page-sizes=[10,50,100]
                        :page-size="query.pageSize"
                        :total="total" >
                </el-pagination>
            </div>
        </div>
        <!-- 编辑弹出框 -->
        <el-dialog title="编辑" v-model="view_edit_dialog_Visible" width="75%" :close-on-click-modal="false">
            <div class="handle-box">
                <span><h3>{{DictHeadTitle}}</h3></span>
            </div>
            <el-tabs v-model="view_tab_activeName" @tab-click="func_dialog_tab_handleClick">
                <el-tab-pane label="字典类目" name="first">
                    <el-card class="box-card">
                    <el-form label-width="formLabelWidth">
                        <el-form-item label="字典索引编号" :label-width="formLabelWidth">
                            <el-input v-model="dictform.dicCode" maxlength="10" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item label="字典中文名称" :label-width="formLabelWidth">
                            <el-input v-model="dictform.dicName" maxlength="40" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item label="索引值" :label-width="formLabelWidth">
                            <el-input v-model="dictform.dicValue" minlength="4" maxlength="4" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item label="所属类目" v-if="view_detail_show" :label-width="formLabelWidth">
                            <el-select v-model="dictform.groupId" placeholder="请选择所属类目">
                                <el-option v-for="item in groupPopOptions" :key="item.value" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="字典类目英文名称" v-if="!view_detail_show" :label-width="formLabelWidth">
                            <el-input v-model="dictform.groupCode"></el-input>
                        </el-form-item>
                        <el-form-item label="字典类目编号" v-if="!view_detail_show" :label-width="formLabelWidth">
                            <el-input v-model="dictform.groupId" minlength="4" maxlength="4" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item label="排序编号" :label-width="formLabelWidth">
                            <el-select v-model="dictform.sort" placeholder="Select">
                                <el-option v-for="item in 10" :key="item" :label="item" :value="item" />
                            </el-select>
                        </el-form-item>
                    </el-form></el-card>
                </el-tab-pane>
                <el-tab-pane label="字典释义" name="second" :disabled="view_tab_disabled">
                <el-card class="box-card">
                    <el-table :data="expTableData" stripe border class="table" header-cell-class-name="table-header" style="width: 100%">
                        <el-table-column prop="id" label="ID" width="90" align="center"></el-table-column>
                        <el-table-column prop="dicCode" label="索引编号" />
                        <el-table-column prop="dicName" label="中文释义" />
                        <el-table-column prop="dicNickname" label="英文释义" />
                        <el-table-column prop="dicValue" label="索引值" />
                        <el-table-column prop="groupCode" label="类目名称" />
                        <el-table-column prop="groupId" label="类目编号" />
                        <el-table-column prop="sort" label="排序" />
                        <el-table-column label="状态" align="center" >
                        <template #default="scope">
                            <el-tag :type="
                                scope.row.disable === '成功' ? 'success' :
                                scope.row.disable === '失败' ? 'danger' : '' ">{{ scope.row.disable }}
                            </el-tag>
                        </template>
                        </el-table-column>
                    </el-table>
                </el-card></el-tab-pane>
            </el-tabs>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="view_edit_dialog_Visible = false">取 消</el-button>
                    <el-button type="primary" @click="saveEdit">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { fetchDictionaryData, fetchDictionaryPopData } from "../../../api/dict.js";

import { NO_DATA_SELECT_ERROR, SUCCESS_ADDDATA_DIALOG_MESSAGE, SUCCESS_DELDATA_DIALOG_MESSAGE, SUCCESS_EDITDATA_DIALOG_MESSAGE, formLabelWidth, } from "../../../../api/CommonErrorMessage.js";

export default {
    name: "basetable",
    setup() {
        const router = useRouter();
        let groupPopOptions = ref([]);
        const view_level_show = ref(false);
        const view_tab_disabled = ref(false);
        const view_detail_show = ref(false);
        // 表单loading: true,
        const isLoading = ref(true);
        // 表单输入框前长度
        const formLabelWidth = ref("170px");
        let add_flg = ref(true);
        let DictHeadTitle = ref("");
        const query = reactive({
            keyword: "",
            activeStatus: "0",
            pageNum: 1,
            pageSize: 10,
        });
        const dictTableData = ref([]);
        const expTableData = ref([]);
        // 外置列表总页数
        const total = ref(0);
        const pageTotal = ref(0);
        // 获取表格数据
        const func_getData = () => {
            dictTableData.value= [];
            var t= setTimeout(function() {
                fetchDictionaryData(query).then((res) => {
                    dictTableData.value = res.data.data.list;
                    total.value = res.data.data.total;
                    isLoading.value = false;
                }).catch(() => { isLoading.value = false;});
            },1000);
        };
        func_getData();
        const func_switch_load = () => {
            isLoading.value = true;
            query.pageNum = 1;
            func_getData();
        };
        // 查询操作
        const func_handleSearch = () => {
            query.pageIndex = 1;
            func_getData();
        };
        /**
         * @name 分页导航
         */
        const func_handlePageChange = (val) => {
            isLoading.value = true;
            query.pageNum = val;
            func_getData();
        };
        /**
         * @name 分页数量查询
         */
        const func_handleSizeChange = (val) => {
            isLoading.value = true;
            query.pageNum = 1;
            query.pageSize = val;
            func_getData();
        }; 
        // 删除操作
        const func_handleDelete = (index) => {
            // 二次确认删除
            ElMessageBox.confirm("确定要删除吗？", "提示", {
                type: "warning",
            })
            .then(() => {
                ElMessage.success(SUCCESS_DELDATA_DIALOG_MESSAGE);
                dictTableData.value.splice(index, 1);
            })
            .catch(() => {});
        };
        // 表格编辑时弹窗和保存
        const view_edit_dialog_Visible = ref(false);
        let dictform = reactive({
            id: 0,
            dicCode: "",
            dicName: "",
            dicValue: "",
            groupCode: "",
            groupId: "",
            sort: 1,
        });
        let idx = -1;
        const func_handleEdit = (index, row) => {
            idx = index;
            Object.keys(dictform).forEach((item) => {
                dictform[item] = row[item];
            });
            if(row.hasChild){
                expTableData.value = row.children;
                view_tab_disabled.value = false;
                view_detail_show.value = false;
            } else {
                expTableData.value = null;
                view_tab_disabled.value = true;
                view_detail_show.value = true;
                fetchDictionaryPopData(query).then((res) => {
                    groupPopOptions.value = res.data.data.list;
                }).catch(() => { });
            };
            view_tab_activeName.value='first';
            view_edit_dialog_Visible.value = true;
        };
        const saveEdit = () => {
            view_edit_dialog_Visible.value = false;
            ElMessage.success(`修改第 ${idx + 1} 行成功`);
            Object.keys(form).forEach((item) => {
                dictTableData.value[idx][item] = form[item];
            });
        };
        const func_table_lazy_load = (tree, treeNode, resolve) => {
            setTimeout(() => {resolve(tree['children'])}, 1000);
        };
        /**
         * @name 添加操作
         */
        const func_handleAddBut = (but,event) => {
            // 路由跳转到添加详情页面
            router.push("/dictionaryDialog")
        };
        /**
         * 标签内方法
         * @name 资源批量删除方法
         * @description 主按钮下拉的批量删除操作
         */
        const func_handleDelBut = (but,event) => {
        }; 
        /**
         * 标签内方法
         * @name 资源批量恢复方法
         * @description 主按钮下拉的批量恢复操作
         */
        const func_handleRecyclingBut = (but,event) => {
        };
        let view_tab_activeName=ref('first');
        const func_dialog_tab_handleClick = (tab, event) =>{
        //    console.log(tab, event);
        };
        return {
            formLabelWidth, dictform, pageTotal,
            view_level_show, view_tab_disabled, isLoading, query, total,
            dictTableData, expTableData, groupPopOptions,
            view_tab_activeName, DictHeadTitle, view_edit_dialog_Visible, view_detail_show,
            func_switch_load, func_handleSearch, func_handlePageChange, func_handleSizeChange, func_table_lazy_load,
            func_dialog_tab_handleClick, func_handleDelete, func_handleEdit, saveEdit,
            func_handleAddBut, func_handleDelBut, func_handleRecyclingBut,
        };
    },
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.box-card {
    width: 99%;
}
.box-card.button {
    padding: 0;
    float: right;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
